﻿<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery省市区三级联动插件 - 站长素材</title>

<link rel="stylesheet" href="css/pick-pcc.min.1.0.1.css">
<style>
	body{padding:10px;}
	.pick-area{display: inline-block;}
	.a{float:left;width:100%;margin:10px;}
	.a a{float:left;margin:10px;}
	.a input{float:left;width:400px;padding:10px;margin:10px;outline-color: gold;}
	h1{text-align: center;}
	h3{margin:5px;color:#333;}
	h4{margin:5px;color:#666;padding:0 20px;font-weight: 100;}
	.blank{float:left;width:50%;height:400px;background:cyan;border-top:1px solid #333;margin-top:50px;}
	.blank2{float:left;width:50%;height:400px;background:lightpink;border-top:1px solid #333;padding-top:50px;}
	.box{width:100%;overflow: hidden;background:lightgreen;}
</style>

</head>
<body>

<div class="a">
	<h3>使用方法1</h3>
	<pre>
	 最简单的的使用方法
	</pre>
    <a href="javascript:void(0)" class="pick-area pick-area1" name="山东省/临沂市/兰陵县"></a>
</div>

<div class="a">
	<h3>使用方法2</h3>
	<a href="javascript:void(0)" class="pick-area pick-area2" name=""></a>
	<input type="text" placeholder="调用元素pick-area2，显示值的地方，方法在参数getVal中">
</div>

<div class="a">
	<h3>使用方法3</h3>
	<a href="javascript:void(0)" class="pick-area pick-area3" name=""></a>
	<input type="text" placeholder="调用元素pick-area3，显示值的地方，方法在参数getVal中">
</div>

<div class="a">
	<h3>使用方法4</h3>
	<a href="javascript:void(0)" class="pick-area pick-area4" name="新疆维吾尔自治区/博尔塔拉蒙古自治州"></a>
	<input type="text" placeholder="调用元素pick-area4，显示值的地方，方法在参数getVal中">
</div>

<div class="a">
	<h3>使用方法5</h3>
	<a href="javascript:void(0)" class="pick-area pick-area5" name=""></a>
	<input type="text" placeholder="调用元素pick-area5，显示值的地方，方法在参数getVal中">
</div>

<div class="a">
	<h3>使用方法6</h3>
	<a href="javascript:void(0)" class="pick-area pick-area6" name=""></a>
	<input type="text" placeholder="调用元素pick-area6，显示值的地方，方法在参数getVal中">
</div>
<div class="a">
	<a href="javascript:void(0)" class="pick-area pick-area6" name=""></a>
	<input type="text" placeholder="调用元素pick-area6，显示值的地方，方法在参数getVal中">
</div>
<div class="a">
	<a href="javascript:void(0)" class="pick-area pick-area6" name=""></a>
	<input type="text" placeholder="调用元素pick-area6，显示值的地方，方法在参数getVal中">
</div>

<div class="a">
	<h3>使用方法7</h3>
	<a href="javascript:void(0)" class="pick-area pick-area7" name="province"></a>
</div>

<h1>pc端省市区三级联动插件使用说明：</h1>
<h2>
<pre>
功能概要：
    （1）数据初始化：提供两种数据初始化的方式
    （2）样式友好化：样式可修改
    （3）事件回调
    （4）数据支持三种格式：“省/市/县”、“省/市”、“省
    （5）很新的省市县json数据
</pre>
</h2>
<div>
    <h3>1.数据初始化，提供两种数据初始化的方式</h3>
    <h4>
<pre>
1.两种省市县数据初始化方式的属性为：a标签中的name和pickArea方法中的format参数，这两个参数的格式必须为“省/市/县”、“省/市”、“省”；
    （1）只要设置了format，并且format!=""，就以format格式为主，就不管有没有设置name属性了
    （2）如果设置了name，并且name!=""且format没有设置任何值（即format不写，或者为""），则以name格式为主
    （3）其它的，就会自动生成“请选择省/请选择市/请选择县”
2.那么，会有人问，为什么要提供“a标签中的name和pickArea方法中的format参数”这两种数据回显或者初始化的方式呢？按照常规的插件使用方法，直接使用pickArea方法中的format参数就可以了啊？
  是的，平时前端人员直接使用“pickArea方法中的format参数”来初始化数据就可以了，但是在有的公司，页面的数据渲染是由后端来完成的，就比如我们公司，一开始数据渲染都是由后端使用gsp标签直接在html里就把数据渲染完了，
  那么，这时候，他们使用“a标签中的name”属性来渲染数据，显得更为方便。如下图：
    <img src="img/2017-10-27_104931.png" alt="" style="width:70%;">
    当然，这样写完之后，还是要用$("调用元素").pickArea();方法来init插件，只是不用在pickArea方法中使用format回显数据了。
</pre>
    </h4>
</div>
<div>
    <h3>2.样式友好化：样式可修改</h3>
    <h4>
<pre>
插件使用时，自己可手动传参修改的样式有：
（1）字体颜色-color、大小-fontSize
（2）文本边框的颜色-borderColor
（3）下拉框边框的颜色-listBdColor，文本框的宽度-width、高度-height（下拉框里每个li元素的高度和文本框的高度一样）
（4）下拉箭头的颜色-arrowColor和距离边框右侧的距离-arrowRight
（5）“省”这个数据所在的span标签相对文本边框左侧的距离-paddingLeft
（6）鼠标滑过时的背景颜色-hoverColor
（7）数据列表的包裹元素ul.pick-list的最大高度-maxHeight
</pre>
    </h4>
</div>
<div>
    <h3>3.事件回调</h3>
    <h4>
<pre>
1.事件回调函数为参数中的"getVal"，在这个方法中可以获得两个有用的值：
    （1）$("."+$(".pick-area-dom").val())
    .pick-area-dom是插入页面中的隐藏域input[type==hidden]的类名，它的value值存放着getVal()回调函数触发一次之后，记录的调用插件的那个a元素，这个值（即$(".pick-area-dom").val()）是一个类名，该类名唯一
    那么$("."+$(".pick-area-dom").val())就是当前调用插件的那个a元素了。

    这个返回的是调用这个插件的元素pick-area，$(".pick-area-dom").val()的值是该元素的另一个class名，这个class名在dom结构中是唯一的，不会有重复，可以通过这个class名来识别这个pick-area。
    比如使用方法6，使用了$(".pick-area6").pickArea({...})初始化两个类名为pick-area6的<a></a>>元素，结果就是产生两个样式一摸一样的省市区插件（颜色为橙色），但是这两个<a></a>>都有属于自己的唯一的一个class名，
    （2）$(".pick-area-hidden").val()
    这个是页面中隐藏域.pick-area-hidden,即类名为pick-area-hidden的input[type==hidden]的值，存放着每次选中一个省、市或者县的时候，
    当前调用插件的a元素的文本框中存放的省市县的最新值，每点击一次下拉框里的li，这个值就会立即更新，和$("."+$(".pick-area-dom").val())是一样的。

    <font color="#e02222">记住，$("."+$(".pick-area-dom").val())和$(".pick-area-hidden").val()这两个值在某些应用场景会很有用！！！慢慢理解他们的用处！！！
    可以参考下面的每一个使用方法，在每个使用方法中，都使用了这两个值，并且为了测试作用，后面都跟了一个input框，来显示每次getVal触发执行一次之后，当前插件的最新值。</font>

    <font color="#a52a2a">图3-1：</font>
    <img src="img/2017-10-26_223533.png" alt="">
    <font color="#a52a2a">图3-2：</font>
    <img src="img/2017-10-26_223642.png" alt="">
    <font color="#a52a2a">图3-3：</font>
    <img src="img/2017-10-26_223659.png" alt="">
    <font color="#a52a2a">图3-4：</font>
    <img src="img/2017-10-26_223715.png" alt="">
    <font color="#a52a2a">图3-5：</font>
    <img src="img/2017-10-26_223737.png" alt="">
2.那么什么时候会触发事件回调函数呢？就是当你选中数据的下拉列表中的某一个li，即选中某一个值时，就会触发该回调函数，在这里你可以获取当前这个插件最新选中的省市县的数据。（也就是上面说的那两个隐藏域的值）
</pre>
    </h4>
</div>
<div>
    <h3>4.数据支持三种格式：“省/市/县”、“省/市”、“省”</h3>
    <h4>
<pre>
例如：  1.在需要初始化数据的时候:
        （1）“山东省/临沂市/兰陵县”
        （2）“江苏省/南京市”
        （3）“广东省”
        2.如果不需要进行初始化数据，插件提供了四种方式：
        （1）name和format均不写，或者name=""并且"format":""  -------> 效果是“请选择省/请选择市/请选择县”
        （2）province/city/county  -------> 效果是“请选择省/请选择市/请选择县”
        （3）province/city  -------> 效果是“请选择省/请选择市”
        （4）province  -------> 效果是“请选择省”
</pre>
    </h4>
</div>
<div>
    <h3>5.新的全国省市县json数据</h3>
    <h4>
<pre>
该插件提供的省市县json数据是国家统计局于2016年7月份发布的，数据很新，几乎可以满足使用需求。现在网上找到的省市县插件的数据都很旧，很多都不能满足使用需求了，再加上大部分插件使用方法不灵活，所以我才被迫写了这个插件。
</pre>
    </h4>
</div>
<div>
    <h3>6.其它注意事项</h3>
    <h4>
<pre>
    （1）<font color="#e02222">***在调用插件pickArea方法时，任何的参数，要么不传，要么就给出值，不可以为""、空格或者其它不符合规则的值，这几乎是任何插件都遵守的规则，记住这一点，使用起来就不会出错。***</font>例如："hoverColor":""是不允许的，但是可以不传这个值。
    （2）所有的跟像素有关的，单位可以带px或者不带都可以的。
    （3）任何跟颜色有关的，要么是red、green一类的，要么是#333、#3399ff一类的，或者跟色值有关的rgb、rgba等正确的色值。
    （4）该插件基于jquery1.8.2开发，使用了jQuery.isEmptyObject()和$().parentsUntil()这两个方法，你们在使用的时候，注意一下自己的jquery版本是否支持这两个方法。
    （5）兼容到IE7及其以上，电脑上没有IE6，所以就没考虑，但是也可以用；其它的主流浏览器均可兼容。
    （6）一个页面中如果有多处使用了pick-area插件，就如你现在所看到的这个页面，为了给介绍使用方法，我初始化了很多这个插件。
     你可以看到的是，每个&lt;a href="javascript:void(0)" class="pick-area"&gt;中都使用了.pick-area这个类名，这个类名必须要有，这是宿主类名，上面还包括很多样式。
     另外 你还可以自己再在某一个&lt;a&gt;中再添加单独的类名，这样可以用以把这个&lt;a&gt;和其它的&lt;a&gt;区分开来，尤其是你自己取值的时候和初始化两个数据不一样的&lt;a href="javascript:void(0)" class="pick-area"&gt;的时候，很方便了。
     比如：&lt;a href="javascript:void(0)" class="pick-area pick-area1"&gt;和&lt;a href="javascript:void(0)" class="pick-area pick-area2"&gt;就可以分别用类名pick-area1和pick-area2来初始化他们，并且识别再取值。
     当然了，你可以看到方法6，我用自定义类名pick-area6初始化了三个一模一样的&lt;a href="javascript:void(0)" class="pick-area"&gt;，数据一样，样式也一样，那么，我又该怎么区分他们呢？
     不要怕，插件还专门给每一个&lt;a&gt;又单独起了一个类名，这个类名是每个&lt;a&gt;自己的唯一的标识，这个类名可以在getVal回调函数中可以获得，就是隐藏域&lt;input type="hidden" class="pick-area-dom"&gt;的值。
     这个值用法很多，作用很大，看你自己如何灵活运用了。
     如图6-1你可以看到，我刚初始化了一个&lt;a href="javascript:void(0)" class="pick-area pick-area4"&gt;，我还没有去触发getVal回调，
     但是在&lt;a href="javascript:void(0)" class="pick-area pick-area4"&gt;中已经多出了一个类名FKGEPAYSSE1509076095000，当我去触发一次getVal回调函数，这时&lt;input type="hidden" class="pick-area-dom"&gt;中就存放了这个类名。
     如果这时我接着去点击了方法5中的内容，既触发了方法5中的getVal，又把&lt;input type="hidden" class="pick-area-dom"&gt;中的value值更新为当前属于方法5中&lt;a href="javascript:void(0)" class="pick-area pick-area5"&gt;的唯一的类名。
     <font color="#a52a2a">图6-1：</font>
     <img src="img/2017-10-27_114933.png" alt="">
</pre>
    </h4>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/pick-pcc.min.1.0.1.js"></script>
<script type="text/javascript">

    $(".pick-area1").pickArea();

    $(".pick-area2").pickArea({
        "format":"北京市/市辖区", //格式
        "width":"300",
        "borderColor":"#7b68ee",//文本边框的色值
        "arrowColor":"#7b68ee",//箭头颜色
        "listBdColor":"#7b68ee",//下拉框父元素ul的border色值
        "color":"#7b68ee",//字体颜色
        "fontSize":"16px",//字体大小
        "hoverColor":"#7b68ee",
        "paddingLeft":"10px",
        "arrowRight":"10px",
        //"preSet":"北京市/市辖区/东城区",
        "getVal":function(){
            //console.log($(".pick-area-hidden").val())
            //console.log($(".pick-area-dom").val())
            var thisdom = $("."+$(".pick-area-dom").val());
            thisdom.next().val($(".pick-area-hidden").val());
        }
    });

    $(".pick-area3").pickArea({
        "format":"江苏省", //格式
        "width":"400",
        "borderColor":"#51AFC9",//文本边框的色值
        "arrowColor":"#51AFC9",//箭头颜色
        "listBdColor":"#51AFC9",//下拉框父元素ul的border色值
        "color":"#51AFC9",//字体颜色
        "fontSize":"16px",//字体大小
        "hoverColor":"#51AFC9",
        "paddingLeft":"10px",
        "arrowRight":"10px",
        "maxHeight":"600",
        //"preSet":"河南省/郑州市",
        "getVal":function(){
            //console.log($(".pick-area-hidden").val())
            //console.log($(".pick-area-dom").val())
            var thisdom = $("."+$(".pick-area-dom").val());
            thisdom.next().val($(".pick-area-hidden").val());
        }
    });
    $(".pick-area4").pickArea({
        "format":"province/city/county", //格式
        "width":"420",//设置“省市县”文本边框的宽度
        "height":"48",//设置“省市县”文本边框的高度
        "borderColor":"#435abd",//设置“省市县”文本边框的色值
        "arrowColor":"#435abd",//设置下拉箭头颜色
        "listBdColor":"#435abd",//设置下拉框父元素ul的border色值
        "color":"#435abd",//设置“省市县”字体颜色
        "fontSize":"20px",//设置字体大小
        "hoverColor":"#435abd",
        "paddingLeft":"30px",//设置“省”位置处的span相较于边框的距离
        "arrowRight":"30px",//设置下拉箭头距离边框右侧的距离
        "maxHeight":"300px",
        //"preSet":"",//数据初始化 ；这里的数据初始化有两种方式，第一种是用preSet属性设置，第二种是在a标签里使用name属性设置
        "getVal":function(){//这个方法是每次选中一个省、市或者县之后，执行的方法
            //console.log($(".pick-area-hidden").val())
            //console.log($(".pick-area-dom").val())
            var thisdom = $("."+$(".pick-area-dom").val());//返回的是调用这个插件的元素pick-area，$(".pick-area-dom").val()的值是该元素的另一个class名，这个class名在dom结构中是唯一的，不会有重复，可以通过这个class名来识别这个pick-area
            thisdom.next().val($(".pick-area-hidden").val());//$(".pick-area-hidden").val()是页面中隐藏域的值，存放着每次选中一个省、市或者县的时候，当前文本存放的省市县的最新值，每点击一次下拉框里的li，这个值就会立即更新
        }
    });
    $(".pick-area5").pickArea({
        "format":"province/city", //格式
        "width":"300",
        "borderColor":"#e02222",//文本边框的色值
        "arrowColor":"#e02222",//下拉箭头颜色
        "listBdColor":"#e02222",//下拉框父元素ul的border色值
        "color":"#e02222",//字体颜色
        "hoverColor":"#e02222",
        //"preSet":"山东省/临沂市/兰陵县",
        "getVal":function(){
            //console.log($(".pick-area-hidden").val())
            //console.log($(".pick-area-dom").val())
            var thisdom = $("."+$(".pick-area-dom").val());
            thisdom.next().val($(".pick-area-hidden").val());
        }
    });

    $(".pick-area6").pickArea({
        "format":"上海市/市辖区/普陀区", //格式
        "width":"340",
        "borderColor":"#ff8c00",//文本边框的色值
        "arrowColor":"#ff8c00",//下拉箭头颜色
        "listBdColor":"#ff8c00",//下拉框父元素ul的border色值
        "color":"#ff8c00",//字体颜色
        "hoverColor":"#ff8c00",
        //"preSet":"山东省/临沂市/兰陵县",
        "getVal":function(){
            //console.log($(".pick-area-hidden").val())
            //console.log($(".pick-area-dom").val())
            var thisdom = $("."+$(".pick-area-dom").val());
            thisdom.next().val($(".pick-area-hidden").val());
        }
    });

    $(".pick-area7").pickArea({"format":"","width":"150px","borderColor":"#7894D4","color":'#7894D4',"arrowColor":"#7894D4"});

</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>